<template>
	<view class="page">
		<!-- <view class="flex benben-position-layout flex flex-wrap align-center wrongQuestion_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub wrongQuestion_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  wrongQuestion_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<text class='wrongQuestion_fd0_0_c1'>车型列表</text>
				<view class='wrongQuestion_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view> -->
		<u-sticky bg-color="transparent">
			<view class="screen">
				<view class="store" @tap.stop="handleJumpDiy" data-type="navigateTo"
					:data-url="`/pages/index/reserveOrder/selectTime`">
					<view class="store_le">
						<view class="store_le_1" v-if="door_to_door == 0">{{storeInfo.store_name}}</view>
						<view class="store_le_1" v-else>{{cityInfo.city}}</view>
						<view class="store_le_2">
							<view class="store_le_2_1">{{timeData.toDay_month}} {{timeData.toDay_time}}</view>
							<image class="store_le_2_2" :src='STATIC_URL+"216.png"' mode="aspectFill"></image>
							<view class="store_le_2_1">{{timeData.twoDay_month}} {{timeData.twoDay_time}}</view>
						</view>
					</view>
					<view class="store_ri">
						<image :src='STATIC_URL+"215.png"' mode="aspectFill"></image>
					</view>
				</view>
				<view class="screen_types">
					<view class="types_item" @tap.stop="getSortTypes(1)">
						<view class="types_item_text" :class="sortTypes == 1 ? 'active_types' : ''">
							<text v-if="price_sort == 0">推荐排序</text>
							<text v-if="price_sort == 1">低价优先</text>
							<text v-if="price_sort == 2">高价优先</text>
						</view>
						<image v-if="sortTypes != 1" :src='STATIC_URL+"217.png"' mode="aspectFill"></image>
						<image v-else :src='STATIC_URL+"221.png"' mode="aspectFill"></image>
					</view>
					<!-- <view class="types_item" @tap.stop="getSortTypes(2)">
						<view class="types_item_text" :class="sortTypes == 2 ? 'active_types' : ''">距离优先</view>
						<image v-if="sortTypes != 2" :src='STATIC_URL+"217.png"' mode="aspectFill"></image>
						<image v-else :src='STATIC_URL+"221.png"' mode="aspectFill"></image>
					</view> -->
					<view class="types_item" @tap.stop="getSortTypes(2)">
						<view class="types_item_text omit_text" :class="sortTypes == 2 ? 'active_types' : ''">{{coupon_name ? coupon_name : '次卡团购'}}</view>
						<image v-if="sortTypes != 2" :src='STATIC_URL+"217.png"' mode="aspectFill"></image>
						<image v-else :src='STATIC_URL+"221.png"' mode="aspectFill"></image>
					</view>
					<view class="types_item" @tap.stop="getSortTypes(3)">
						<view class="types_item_text" :class="sortTypes == 3 ? 'active_types' : ''">更多筛选</view>
						<text class="filter_num flex align-center justify-center" v-if="filter_num > 0">{{filter_num}}</text>
						<image v-if="sortTypes != 3" :src='STATIC_URL+"217.png"' mode="aspectFill"></image>
						<image v-else :src='STATIC_URL+"221.png"' mode="aspectFill"></image>
					</view>
				</view>
				<view :style="{marginTop: 24 + 'rpx'}" v-if="show">
					<view class="recommend_sort" v-if="sortTypes == 1">
						<view class="select_item" @tap.stop="selectPrice(0)">
							<view class="select_item_text">推荐排序</view>
							<image v-if="price_sort == 0" :src='STATIC_URL+"7.png"'></image>
							<image v-else :src='STATIC_URL+"8.png"'></image>
						</view>
						<view class="select_item" @tap.stop="selectPrice(1)">
							<view class="select_item_text">低价优先（总价）</view>
							<image v-if="price_sort == 1" :src='STATIC_URL+"7.png"'></image>
							<image v-else :src='STATIC_URL+"8.png"'></image>
						</view>
						<view class="select_item" @tap.stop="selectPrice(2)">
							<view class="select_item_text">高价优先（总价）</view>
							<image v-if="price_sort == 2" :src='STATIC_URL+"7.png"'></image>
							<image v-else :src='STATIC_URL+"8.png"'></image>
						</view>
					</view>
					
					<view class="group_content" v-if="sortTypes == 2">
						<view class="group_tabs flex align-center">
							<view class="tabs_item flex align-center justify-center" :class="group_type == 1 ? 'active_tabs_item_1' : ''" @tap="changeGroup(1)">
								<text>我的次卡</text>
								<image class="group_1_img" v-if="group_type == 1" :src='STATIC_URL+"110.png"' mode="aspectFill"></image>
							</view>
							<view class="tabs_item flex align-center justify-center" :class="group_type == 0 ? 'active_tabs_item_2' : ''" @tap="changeGroup(0)">
								<text>我的团购</text>
								<image class="group_2_img" v-if="group_type == 0" :src='STATIC_URL+"110.png"' mode="aspectFill"></image>
							</view>
						</view>
						<scroll-view scroll-y="true" class="group_list" v-if="couponList.length > 0">
							<view class="group_item" :class="coupon_id == item.id ? 'active_group_item' : ''" v-for="(item, index) in couponList" :key="index" @tap.stop="selectGroup(item.name, item.id, item.coupon_type)">
								<text>￥{{Number(item.oprice)}}</text>
								<text style="margin-left: 12rpx;">{{item.name}}</text>
								<image v-if="coupon_id == item.id" :src='STATIC_URL+"111.png"' mode=""></image>
							</view>
						</scroll-view>
						<view class="noData_other_2" v-else>
							<image :src='STATIC_URL+"no.png"'></image>
							<view v-if="group_type == 1">暂无次卡~</view>
							<view v-if="group_type == 0">暂无团购~</view>
						</view>
						<view class="filter_operation" style="padding: 0 24rpx;" v-if="couponList.length > 0">
							<view class="operation_1" @tap.stop="resultGroup">重置</view>
							<view class="operation_2" @tap.stop="confirmGroup">确定</view>
						</view>
					</view>
					
					<view class="more_filter" v-if="sortTypes == 3">
						<scroll-view scroll-y="true" class="filter_scoll">
							<view class="filter_title">送车距离</view>
							<view class="filter_list">
								<view class="filter_item" v-for="(v, k) in distanceList" :key="k"
									:class="distance == v.id ? 'active_filter_item' : ''"
									@tap.stop="selectDistance(v.id)">
									<text>{{v.name}}</text>
									<view class="filter_icon" v-if="distance == v.id">
										<image :src='STATIC_URL+"7.png"' mode=""></image>
									</view>
								</view>
							</view>
							<view class="filter_title">价格区间（日租金）</view>
							<view class="filter_list">
								<view class="filter_item" v-for="(v, k) in priceList" :key="k"
									:class="priceIndex == k ? 'active_filter_item' : ''" @tap.stop="selectPriceItem(k)">
									<text>
										<text>{{v.price1}}</text>
										<text v-if="v.price2 != '+'">-</text>
										<text>{{v.price2}}</text>
									</text>
									<view class="filter_icon" v-if="priceIndex == k">
										<image :src='STATIC_URL+"7.png"' mode=""></image>
									</view>
								</view>
							</view>
							<view class="filter_title">品牌</view>
							<view class="filter_list" v-if="brandList.length > 0">
								<view class="filter_item" v-for="(v, k) in brandList" :key="k"
									:class="brand_id == v.id ? 'active_filter_item' : ''" @tap.stop="selectBrand(v.id)">
									<text>{{v.name}}</text>
									<view class="filter_icon" v-if="brand_id == v.id">
										<image :src='STATIC_URL+"7.png"' mode=""></image>
									</view>
								</view>
							</view>
							<template v-if="storeList.length > 0">
								<view class="filter_title">租车公司</view>
								<view class="company_list">
									<view class="company_item" v-for="(v, k) in storeList" :key="k"
										:class="store_id == v.id ? 'active_company_item' : ''"
										@tap.stop="selectStore(v.id)">
										<text>{{v.name}}</text>
										<view class="company_icon" v-if="store_id == v.id">
											<image :src='STATIC_URL+"7.png"' mode=""></image>
										</view>
									</view>
								</view>
							</template>

						</scroll-view>
						<view class="filter_operation">
							<view class="operation_1" @tap.stop="resultScreen">重置</view>
							<view class="operation_2" @tap.stop="confirmScreen">确定</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="car_list">
			<scroll-view :scroll-y="true" class="list_le" :style="{height: dom_height + 'rpx'}">
				<view v-for="(item,index) in categoryList" :key="index" @tap.stop="selectCategory(item.id, index)">
					<view class="type_item" :class="category_id == item.id ? 'type_item_s' : ''">
						<template v-if="item.id == 99999">
							<image class="card_icon" :src='STATIC_URL+"112.png"' mode="aspectFill"></image>
						</template>
						<template v-else>
							<view :class="category_id == item.id ? 'type_item_1_s' : 'type_item_1'">{{item.name}}</view>
							<view :class="category_id == item.id ? 'type_item_2_s' : 'type_item_2'" v-if="item.min_price > 0">￥{{Number(item.min_price)}}起</view>
						</template>
						<image class="type_item_3_s" v-if="category_id == item.id" :src='STATIC_URL+"218.png"' mode="aspectFill"></image>
					</view>
				</view>
			</scroll-view>

			<scroll-view :scroll-y="true" class="list_ri" @scrolltolower="scrolltolower"
				:refresher-enabled="isOpenRefresh" :scroll-anchoring="true" :refresher-triggered="triggered"
				@refresherrefresh="refresherrefresh" @refresherpulling="refresherpulling"
				@refresherrestore="refresherrestore" v-if="dom_height != 0" :style="{height: dom_height + 'rpx'}">
				<view class="loading_view" v-if="isShow">
					<u-loading size="36" color="#FC5B03"></u-loading>
					<view>加载中</view>
				</view>
				<template v-else>
					<view class="ri_item" v-for="(item, index) in list" :key="index" @tap.stop="seeQuotation(item)">
						<view style="position: relative;">
							<view class="card_img flex align-center justify-center"
								v-if="item.new_coupon_type == 1 && item.coupon_type == 15 && category_id == 99999">
								<image :src='STATIC_URL+"113.png"' mode="aspectFill"></image>
							</view>
							<view class="vehicle_information">
								<view class="car_name">
									<view class="car_name_1">{{item.name}}</view>
									<view class="car_name_2">
										<text>{{item.seats}}座</text>
										<text class="car_name_2_1">丨</text>
										<text>{{item.gearbox}}</text>
										<text class="car_name_2_1">丨</text>
										<text>{{item.power}}</text>
										<text class="car_name_2_1">丨</text>
										<text>{{item.model}}</text>
									</view>
								</view>
								<view class="car_img">
									<u-lazy-load height="120" border-radius="16" class="car_img"
										:image="item.image"></u-lazy-load>
									
									<view class="group_text flex align-center justify-center"
										v-if="item.new_coupon_type == 1 && item.coupon_type == 1 && category_id != 99999">
										团购可用
									</view>
									<template v-else>
										<image v-if="item.type == 2" class="car_icon" :src='STATIC_URL+"220.png"'
											mode="aspectFill"></image>
									</template>
									<view class="mask_view flex align-center justify-center" v-if="item.rental_status == 1">
										<view class="mask_view_text flex align-center justify-center">已租满</view>
									</view>
								</view>
							</view>
							<view class="vehicle_label">
								<view class="label_le">
									<template v-if="item.tags">
										<template v-for="(v, k) in (item.tags).split(',')">
											<!-- #ifdef MP-ALIPAY -->
											<view v-if="v == 1" class="flex align-center justify-center label_3">
												<image :src='STATIC_URL+"9.png"'></image>
												<text>芝麻免押</text>
											</view>
											<!-- #endif -->
											<!-- #ifndef MP-ALIPAY -->
											<image v-if="v == 1" class="label_1" :src='STATIC_URL+"219.png"'
												mode="aspectFill"></image>
											<!-- #endif -->
											<view class="label_2" v-if="v != 1">{{getTag(v)}}</view>
										</template>
									</template>
								</view>
								<view class="label_ri" v-if="door_to_door == 1">距离{{item.distance_in_meters}}</view>
							</view>
							<view class="car_btm">
								<view class="btm_1" style="width: 100%;">
									<view class="car_price flex align-center">
										<text class="car_price_2">￥</text>
										<text class="car_price_3">{{Number(item.price)}}</text>
										<text class="car_price_1">/天</text>
									</view>
									<view class="car_price flex justify-between">
										<view class="flex align-center">
											<!-- <text class="car_price_1" style="font-size: 20rpx;margin-left: 2rpx;">起</text> -->
											<view class="car_total_price flex align-center">
												<text>总价￥{{Number(item.new_price) * timeData.dayNum}}</text>
											</view>
											<template v-if="category_id != 99999">
												<text v-if="item.new_coupon_type != 0">
													<text v-if="item.new_coupon_type == 1">
														<text class="car_price_4" v-if="item.coupon_type == 1">团购可用</text>
														<text class="car_price_4"
															v-if="item.coupon_type == 2 && item.coupon_price > 0">团购可抵{{Number(item.coupon_price)}}</text>
													</text>
													<text v-if="item.new_coupon_type == 2">
														<text class="car_price_4" v-if="item.coupon_price > 0">优惠券可抵{{Number(item.coupon_price)}}</text>
													</text>
												</text>
											</template>
											<template v-else>
												<text class="car_price_card flex align-center" v-if="item.coupon_price > 0">
													<text class="car_price_card_1">次卡已减</text>
													<text class="car_price_card_2">￥{{Number(item.coupon_price)}}</text>
												</text>
											</template>
										</view>
							
										<view class="btm_3">
											<text class="btm_3_1">{{item.count_store}}个</text>
											<text class="btm_3_2">报价</text>
											<image class="btm_3_3" :src='STATIC_URL+"208.png"' mode="aspectFill"></image>
										</view>
									</view>
									<view style="margin-top: 16rpx;" class="flex align-center">
										<view v-if="item.rental_status == 1 && item.earliest_end_time"
											@tap.stop="adjustLease(item.earliest_end_time, item.id)">
											<text class="expecte_1">{{formatTime(item.earliest_end_time)}} 预计可租</text>
											<text class="expecte_2">调整租期 ></text>
										</view>
										<view style="margin-left: 24rpx;border-radius: 5rpx;" v-if="item.is_other_car == 1"
											@tap.stop="adjustStore(item.id, item.other_car_info, item)">
											<text class="expecte_2">更换门店 ></text>
										</view>
									</view>
								</view>
								<!-- <view class="btm_2" @tap.stop="goReserve">
									预定
								</view> -->
							
							</view>
						</view>
					</view>
					<view class="loadmore" v-if="list.length > 0">
						<u-loadmore font-size="24" :status="status" :icon-type="iconType" :load-text="loadText" />
					</view>
					<view class="noData_other" v-if="list.length == 0 && !isShow">
						<image :src='STATIC_URL+"no.png"'></image>
						<view>暂无数据~</view>
					</view>
					<!-- <template v-if="is_recommend">
						<view class="recommend_cars">
							<view class="recommend_line"></view>
							<view class="recommend_text">好车推荐</view>
							<view class="recommend_line"></view>
						</view>
						<view class="suggest_info">
							<view class="suggest_icon">推荐</view>
							<view class="suggest_text">更多好车等你来选</view>
						</view>
						<view class="recommend_list">
							<view class="ri_item" v-for="(item, index) in 3">
								<view class="vehicle_information">
									<view class="car_name">
										<view class="car_name_1">大众 桑塔纳</view>
										<view class="car_name_2">
											<text>4座</text>
											<text class="car_name_2_1">丨</text>
											<text>自动挡</text>
											<text class="car_name_2_1">丨</text>
											<text>舒适型</text>
											<text class="car_name_2_1">丨</text>
											<text>2016款</text>
										</view>
									</view>
									<view class="car_img">
										<u-lazy-load height="120" border-radius="16" class="car_img" :image="imageUrl"
											:loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
										<image class="car_icon" :src='STATIC_URL+"220.png"' mode="aspectFill"></image>
									</view>
								</view>
								<view class="vehicle_label">
									<view class="label_le">
										<image class="label_1" :src='STATIC_URL+"219.png"' mode="aspectFill"></image>
										<view class="label_2">押金双免</view>
										<view class="label_2">到店取车</view>
									</view>
									<view class="label_ri">距离965m</view>
								</view>
								<view class="car_btm">
									<view class="btm_1">
										<view class="car_total_price">总价￥420起</view>
										<view class="car_price">
											<text class="car_price_1">日均</text>
											<text class="car_price_2">￥</text>
											<text class="car_price_3">350</text>
										</view>
									</view>
									<view class="btm_3" @tap.stop="popupShow = true">
										<text class="btm_3_1">5个</text>
										<text class="btm_3_2">报价</text>
										<image class="btm_3_3" :src='STATIC_URL+"208.png"' mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
					</template> -->

				</template>

			</scroll-view>
		</view>

		<u-popup v-model="popupShow" mode="bottom" border-radius="32">
			<view class="popup">
				<view class="popup_title">
					<u-icon name="close" color="#F6F7FB" size="28"></u-icon>
					<view class="popup_title_text">报价列表</view>
					<u-icon @click="popupShow = false" name="close" color="#111111" size="28"></u-icon>
				</view>
				<view class="select_vehicle">
					<view class="car_name">
						<view class="car_name_1">{{selectOfferInfo.name}}</view>
						<view class="car_name_2">
							<text>{{selectOfferInfo.seats}}座</text>
							<text class="car_name_2_1">丨</text>
							<text>{{selectOfferInfo.gearbox}}</text>
							<text class="car_name_2_1">丨</text>
							<text>{{selectOfferInfo.power}}</text>
							<text class="car_name_2_1">丨</text>
							<text>{{selectOfferInfo.model}}</text>
						</view>
					</view>
					<view class="car_img">
						<u-lazy-load height="120" border-radius="16" class="car_img"
							:image="selectOfferInfo.image"></u-lazy-load>
						<image v-if="selectOfferInfo.type == 2" class="car_icon" :src='STATIC_URL+"220.png"'
							mode="aspectFill"></image>
					</view>
				</view>

				<view class="quotation_list">
					<scroll-view scroll-y="true" class="quotation_scroll">
						<view class="quotation_item" v-for="(v, k) in offerList" :key="k">
							<view class="quotation_information">
								<view class="information">
									<view class="information_1">
										<image :src='STATIC_URL+"223.png"' mode="aspectFill"></image>
										<view class="information_1_1">{{v.store_name}}</view>
										<!-- <view class="information_1_2">5.0分</view> -->
									</view>
									<view class="information_2">
										<image :src='STATIC_URL+"225.png"' mode=""></image>
										<view class="information_2_1">取/还</view>
										<view class="information_2_2">
											<text v-if="door_to_door == 0">到店取送车，</text>
											<text v-if="door_to_door == 1">送取车上门，</text>
											<text>距离门店{{v.distance_in_meters}}</text>
										</view>
									</view>
								</view>
								<view class="quotation_address" @tap.stop="openLocation(v.lat, v.lng, v.store_name)">
									<image :src='STATIC_URL+"224.png"' mode="aspectFill"></image>
									<view class="address_text">地图导航</view>
								</view>
							</view>
							<view class="quotation_label">
								<view class="label_le">
									<template v-if="v.tags">
										<template v-for="(v1, k1) in (v.tags).split(',')">
											<!-- #ifdef MP-ALIPAY -->
											<view v-if="v == 1" class="flex align-center justify-center label_3">
												<image :src='STATIC_URL+"9.png"'></image>
												<text>芝麻免押</text>
											</view>
											<!-- #endif -->
											<!-- #ifndef MP-ALIPAY -->
											<image v-if="v1 == 1" class="label_1" :src='STATIC_URL+"219.png"'
												mode="aspectFill"></image>
											<!-- #endif -->
											<view class="label_2" v-if="v1 != 1">{{getTag(v1)}}</view>
										</template>
									</template>
								</view>
							</view>
							<view class="quotation_btm">
								<template v-if="category_id != 99999">
									<text class="quotation_price_4" v-if="v.coupon_type == 1">团购可用</text>
									<text class="quotation_price_4"
										v-if="v.coupon_type == 2 && v.coupon_price > 0">团购可抵{{Number(v.coupon_price)}}</text>
								</template>
								<view class="quotation_total_price">￥{{Number(v.price)}}/天</view>
								<view class="quotation_price">
									<text class="quotation_price_1">总价</text>
									<text class="quotation_price_2">￥</text>
									<text class="quotation_price_3">{{Number(v.new_price) * timeData.dayNum}}</text>
									<!-- <text class="quotation_price_2" style="margin-left: 2rpx;">起</text> -->
								</view>
								<view class="btm_2" @tap.stop="goReserve(v.store_id)">
									预定
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<u-mask :z-index="100" :show="show" @click="show = false"></u-mask>


		<u-mask :show="timeShow">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="coupon_num_title">更换租期</view>
					<view class="store_le" style="width: 100%;">
						<view class="store_le_1" v-if="door_to_door == 0">{{storeInfo.store_name}}</view>
						<view class="store_le_1" v-else>{{cityInfo.city}}</view>
						<view class="store_le_2">
							<view class="store_le_2_1">{{changeTimeData.toDay_month}} {{changeTimeData.toDay_time}}
							</view>
							<image class="store_le_2_2" :src='STATIC_URL+"216.png"' mode="aspectFill"></image>
							<view class="store_le_2_1">{{changeTimeData.twoDay_month}} {{changeTimeData.twoDay_time}}
							</view>
						</view>
					</view>
					<view class="coupon_num_btn flex align-center justify-between">
						<view class="coupon_num_btn_1 flex align-center justify-center" @tap.stop="timeShow=false">取消
						</view>
						<view class="coupon_num_btn_2 flex align-center justify-center" @tap.stop="confirmChangeTime">确认
						</view>
					</view>
				</view>
			</view>
		</u-mask>

		<!-- 门店列表 -->
		<u-popup v-model="storeShow" mode="bottom" border-radius="32">
			<view class="popup">
				<view class="popup_title">
					<u-icon name="close" color="#F6F7FB" size="28"></u-icon>
					<view class="popup_title_text">可选门店列表</view>
					<u-icon @click="storeShow = false" name="close" color="#111111" size="28"></u-icon>
				</view>
				<view class="select_vehicle">
					<view class="car_name">
						<view class="car_name_1">{{selectOfferInfo.name}}</view>
						<view class="car_name_2">
							<text>{{selectOfferInfo.seats}}座</text>
							<text class="car_name_2_1">丨</text>
							<text>{{selectOfferInfo.gearbox}}</text>
							<text class="car_name_2_1">丨</text>
							<text>{{selectOfferInfo.power}}</text>
							<text class="car_name_2_1">丨</text>
							<text>{{selectOfferInfo.model}}</text>
						</view>
					</view>
					<view class="car_img">
						<u-lazy-load height="120" border-radius="16" class="car_img"
							:image="selectOfferInfo.image"></u-lazy-load>
						<image v-if="selectOfferInfo.type == 2" class="car_icon" :src='STATIC_URL+"220.png"'
							mode="aspectFill"></image>
					</view>
				</view>

				<view class="quotation_list">
					<scroll-view scroll-y="true" class="quotation_scroll">
						<view class="quotation_item" v-for="(v, k) in other_car_info" :key="k" @tap.stop="goCars(v)">
							<view class="quotation_information">
								<view class="information" style="flex: 1;">
									<view class="information_1 flex align-center justify-between">
										<view class="flex align-center">
											<image :src='STATIC_URL+"223.png"' mode="aspectFill"></image>
											<view class="information_1_1">{{v.store_name}}</view>
										</view>
										<view class="flex align-center quotation_address2"
											@tap.stop="openLocation(v.lat, v.lng, v.store_name)">
											<image :src='STATIC_URL+"224.png"'></image>
											<view class="address_text">地图导航</view>
										</view>
									</view>
									<view class="information_2">
										<image :src='STATIC_URL+"225.png"' mode=""></image>
										<view class="information_2_1">取/还</view>
										<view class="information_2_2">
											<text v-if="door_to_door == 0">到店取送车</text>
											<text v-if="door_to_door == 1">送取车上门</text>
										</view>
										<view class="confirm_btn">预定</view>
									</view>
								</view>
							</view>


						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import utils from "@/common/utils/utils.js"
	export default {
		data() {
			return {
				"show": false,
				"popupShow": false,
				"windowHeight": 1400, // 页面高度
				"loadingImg": "",
				"errorImg": "",
				"imageUrl": "https://n.sinaimg.cn/spider20240423/618/w1267h951/20240423/00f3-b0424ba924fbe8bb330e2dabf0f7b880.jpg",
				"sortTypes": 0,
				"list": [],
				"timeData": {},
				"categoryList": [], // 分类列表
				"category_id": "", // 分类id
				"categoryIndex": 0,

				"is_recommend": false,
				"price_sort": 0, // 1=价格从低到高，2=价格从高到低
				"distance_sort": 0, // 1=距离从近到远
				"brand_id": "", // 品牌id
				"store_id": "", // 门店id
				"distance": "", // 距离多少公里
				"distanceList": [{
						name: '1公里以内',
						id: 1
					},
					{
						name: '2公里以内',
						id: 2
					},
					{
						name: '3公里以内',
						id: 3
					},
					{
						name: '5公里以内',
						id: 5
					}
				],
				"price_start": "",
				"price_end": "",
				"priceList": [{
						price1: 0,
						price2: 200
					},
					{
						price1: 200,
						price2: 500
					},
					{
						price1: 500,
						price2: '+'
					}
				],
				"priceIndex": -1,
				"selectOfferInfo": {}, // 选中的车辆
				"offerList": [], // 报价门店列表

				"brandList": [], // 品牌列表
				"storeList": [], // 门店列表
				"is_response": false,
				"door_to_door": "0", // 0门店自提  1送车上门
				"cityInfo": {}, // 定位信息
				"storeInfo": {}, // 门店信息
				"dom_height": 1000,

				"isShow": true,
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"iconType": 'flower',
				"loadText": {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},

				"tags": uni.getStorageSync('tag'),
				"changeTimeData": {},
				"timeShow": false,
				"timeStamp": 0,
				"car_id": "",
				"isOpenRefresh": true,
				"triggered": false,
				"_freshing": false,

				"storeShow": false,
				"other_car_info": [], // 门店列表
				"groupList": [], // 团购列表
				"cardList": [],  // 次卡列表
				"couponList": [],  // 总的优惠券列表
				"group_type": 1,  // 1次卡 0团购
				
				"is_sequence": 0,  // 区分是否是次卡专区
				"coupon_id": "",
				"coupon_type": "",
				"coupon_name": "",
			}
		},
		computed: {
			filter_num() {
				let num = 0;
				if (this.door_to_door == 0) {
					num = (this.distance ? 1 : 0) + (this.price_start ? 1 : 0) + (this.brand_id ? 1: 0);
				} else {
					num = (this.distance ? 1 : 0) + (this.price_start ? 1 : 0) + (this.brand_id ? 1: 0) + (this.store_id ? 1 : 0);
				}
				return num;
			}
		},
		onLoad(options) {
			let {
				door_to_door
			} = options;
			if (door_to_door !== undefined) this.door_to_door = door_to_door;
			if (this.door_to_door == 0) {
				this.storeInfo = uni.getStorageSync('store');
				this.store_id = this.storeInfo.store_id;
			} else {
				this.cityInfo = uni.getStorageSync('city');
				console.log(this.cityInfo);
			}
			setTimeout(() => {
				this.windowHeight = this.pxToRpx(uni.getSystemInfoSync().windowHeight);
				this.dom_height = this.windowHeight - (210 + this.StatusBarRpx);
			}, 300)
			if (this.door_to_door == 1) {
				this.getCarStoreInfo();
			}
			this.timeData = global.timeData;
			this.postCategoryInfo();
			this.getBrandInfo();
			uni.$on('changeTime', res => {
				this.timeData = global.timeData;
				// console.log(this.timeData);
				this.list = [];
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.postCategoryInfo();
			})
		},
		onShow() {
			this.show = false;
		},
		onResize(e) {
			console.log(e);
		},
		onUnload() {
			uni.$off('changeTime');
		},
		// 下拉刷新
		onPullDownRefresh() {

		},
		// 上拉加载
		onReachBottom() {
			// if (this.page >= this.last_page) return;
			if (!this.is_pull) {
				this.status = 'nomore'
				return;
			}
			this.status = 'loading';
			this.page++;
			setTimeout(() => {
				// if (this.page >= this.last_page) this.status = 'nomore';
				// else this.status = 'loading';
				this.is_pull = true;
				this.postCarList();
			}, 500)
		},
		methods: {
			// 团购券列表  userCouponList
			getCouponList() {
				this.$api.post(global.apiUrls.userCouponList, {
					user_id: global.userInfo.user_id,
					status: 0,
					start_time: this.timeData.toDay,
					end_time: this.timeData.twoDay
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						let groupList = [];
						let cardList = [];
						if (res.data.data.length > 0) {
							groupList = res.data.data.filter(e => e.coupon_type != 15 && e.is_use == 1);
							cardList = res.data.data.filter(e => (e.coupon_type == 15 && e.card_count <= this.timeData.dayNum));
						}
						this.groupList = groupList;
						this.cardList = cardList;
						if (this.categoryList.length > 0) {
							let categoryIndex = this.categoryList.findIndex(e => e.id == 99999);
							if (categoryIndex == -1) {
								categoryIndex = 0;
							}
							this.selectCategory(this.categoryList[categoryIndex].id, categoryIndex);
						}
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 获取到最接近的优惠券或次卡
			findClosestValue(arr, target, type) {
				// type  1次卡  0团购
				let closestItem = null;
				let smallestDifference = Infinity;
				let sortedArr = [];
				sortedArr = [...arr].sort((a, b) => (b.oprice - a.oprice));
				if (type == 0) {
					sortedArr = sortedArr.sort((a, b) => (b.left_num - a.left_num));
					sortedArr.forEach(item => {
						let difference = Math.abs(item.left_num - target);
						if ((difference < smallestDifference) && item.is_many_days != 0) {
							smallestDifference = difference;
							closestItem = item;
						}
					});
				} else if (type == 1) {
					sortedArr = sortedArr.sort((a, b) => (b.card_count - a.card_count));
					sortedArr.forEach(item => {
						let difference = Math.abs(item.card_count - target);
						if (difference < smallestDifference) {
							smallestDifference = difference;
							closestItem = item;
						}
					});
				}
				console.log(sortedArr);
				console.log(closestItem);
				return closestItem ? closestItem : sortedArr[0];
			},
			
			// 格式化最早租车时间
			formatTime(text) {
				if (text) {
					return (text.substring(5, 10)).replace('-', '.');
				}
			},
			// 选择调整租期
			adjustLease(earliest_end_time, car_id) {
				this.car_id = car_id;
				let timeStamp = new Date(earliest_end_time).getTime();
				let toDay = earliest_end_time;
				let week = utils.getWeekday(toDay);
				let twoDay = utils.getTwoDaysAfter(timeStamp, global.timeData.dayNum);
				let twoWeek = utils.getWeekday(twoDay);
				this.timeStamp = timeStamp;
				this.changeTimeData = {
					dayNum: global.timeData.dayNum,
					is_today: toDay == utils.getNowTime() ? 1 : 0,
					toDay: toDay,
					toDay_month: (toDay.substring(5, 10)).replace('-', '月') + '日',
					toDay_time: toDay.substring(11, 16),
					week: week,
					twoDay: twoDay,
					twoDay_month: (twoDay.substring(5, 10)).replace('-', '月') + '日',
					twoDay_time: twoDay.substring(11, 16),
					twoWeek: twoWeek
				}
				this.timeShow = true;
			},
			// 确认更换租期
			confirmChangeTime() {
				this.timeShow = false;
				// global.timeStamp = this.timeStamp;
				// global.timeData = this.changeTimeData;
				// this.timeData = this.changeTimeData;
				this.list = [];
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.postCarList();
				uni.navigateTo({
					url: '/pages/index/reserveOrder/reserveOrder?store_id=' + this.store_id +
						'&car_id=' + this.car_id + '&door_to_door=' + this.door_to_door + '&timeData=' + JSON
						.stringify(this.changeTimeData) + '&is_sequence=' + this.is_sequence + '&coupon_id=' + this.coupon_id
				})

			},
			// 调整门店
			adjustStore(car_id, other_car_info, item) {
				this.selectOfferInfo = item;
				this.car_id = car_id;
				this.other_car_info = other_car_info;
				this.storeShow = true;
			},

			// px转rpx
			pxToRpx(px) {
				let scale = uni.upx2px(100) / 100;
				return px / scale
			},
			getSortTypes(type) {
				this.sortTypes = type;
				this.show = true;
				if (type == 1 || type == 3) {
					this.distance_sort = 0;
				} else if (type == 2) {
					
					return;
					this.show = false;
					this.distance_sort = 1;
					this.priceIndex = -1;
					this.price_start = "";
					this.price_end = "";
					this.distance = "";
					this.brand_id = "";
					if (this.door_to_door == 1) {
						this.store_id = "";
					}
					this.list = [];
					this.page = 1;
					this.is_pull = true;
					this.isShow = true;
					this.postCarList();
				}
			},
			// 获取品牌列表  getBrand
			getBrandInfo() {
				this.$api.get(global.apiUrls.getBrand, {

				}).then(res => {
					if (res.data.code == 1) {
						this.brandList = res.data.data;
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 获取门店列表  getCarStore
			getCarStoreInfo() {
				this.$api.get(global.apiUrls.getCarStore, {
					city_id: this.cityInfo.citycode
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.storeList = res.data.data;
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 获取分类列表  getCategory
			postCategoryInfo() {
				this.$api.post(global.apiUrls.getCategory, {
					user_id: global.userInfo ? global.userInfo.user_id : "",
					take_at: this.timeData.toDay,
					repay_at: this.timeData.twoDay
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.categoryList = res.data.data;
						if (global.token) {
							this.getCouponList();
						} else {
							if (this.categoryList.length > 0) {
								let categoryIndex = this.categoryList.findIndex(e => e.id == 99999);
								if (categoryIndex == -1) {
									categoryIndex = 0;
								}
								this.selectCategory(this.categoryList[categoryIndex].id, categoryIndex);
							}
						}
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			selectCategory(id, index) {
				this.category_id = id;
				this.categoryIndex = index;
				let couponInfo = "";
				if (id != 99999) {
					if (this.groupList.length > 0) {
						couponInfo = this.findClosestValue(this.groupList, this.timeData.dayNum, 0);
					} else {
						couponInfo = "";
						this.coupon_name = "";
						this.coupon_id = "";
						this.coupon_type = "";
						this.sortTypes = 0;
					}
					this.changeGroup(0);
				} else {
					if (this.cardList.length > 0) {
						couponInfo = this.findClosestValue(this.cardList, this.timeData.dayNum, 1);
					} else {
						couponInfo = "";
						this.coupon_name = "";
						this.coupon_id = "";
						this.coupon_type = "";
						this.sortTypes = 0;
					}
					this.changeGroup(1);
				}
				if (couponInfo) {
					this.selectGroup(couponInfo.name, couponInfo.id, couponInfo.coupon_type);
					this.sortTypes = 2;
				}
				if (this.groupList.length == 0 && this.cardList.length == 0) {
					this.changeGroup(1);
				}
				this.list = [];
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.postCarList();
				// 是次卡
				if (id == 99999) {
					this.is_sequence = 1;
				} else {
					this.is_sequence = 0;
				}
			},
			// 获取车辆列表  getCarList
			postCarList() {
				if (this.is_response) return;
				this.is_response = true;
				this.$api.post(global.apiUrls.getCarList, {
					goods_order_id: this.coupon_id,
					coupon_type: this.coupon_type,
					category_id: this.category_id == 0 ? "" : this.category_id,
					// lng: this.door_to_door == 0 ? this.storeInfo.lng : this.cityInfo.lng,
					// lat: this.door_to_door == 0 ? this.storeInfo.lat : this.cityInfo.lat,
					lng: this.cityInfo.lng,
					lat: this.cityInfo.lat,
					city_id: this.door_to_door == 0 ? this.storeInfo.citycode : this.cityInfo.citycode,
					start_time: this.timeData.toDay,
					end_time: this.timeData.twoDay,
					price_sort: this.price_sort == 0 ? "" : this.price_sort,
					distance_sort: this.distance_sort == 0 ? "" : this.distance_sort,
					price_start: this.price_start,
					price_end: this.price_end,
					distance: this.distance,
					brand_id: this.brand_id,
					store_id: this.store_id,
					page: this.page,
					rows: 10
				}).then(res => {
					// console.log(res);
					this.is_response = false;
					this.isShow = false;
					this.refresherStatus = false;
					if (res.data.code == 1) {
						if (res.data.data.length < 10) {
							this.is_pull = false;
							this.status = 'nomore';
						}
						this.list = this.list.concat(res.data.data);
						// console.log(this.list);
					} else {
						this.$message.info(res.data.info);
					}
				}).catch(err => {
					this.is_response = false;
				})
			},
			getTag(id) {
				let item = this.tags.find((item) => item.id == id);
				return item.name;
			},
			scrolltolower() {
				if (!this.is_pull) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				this.page++;
				this.postCarList();
			},
			// 自定义下拉刷新
			refresherrefresh() {
				console.log('下拉被触发');
				if (this._freshing) return;
				this._freshing = true;
				this.list = [];
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					this.postCarList();
				}, 300)
			},
			// 自定义控件被下拉
			refresherpulling(e) {
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.triggered = true;
			},
			refresherrestore() {
				console.log('下拉刷新复位');
				this.triggered = false; // 需要重置
			},
			// 价格排序
			selectPrice(type) {
				this.price_sort = type;
				this.distance_sort = 0;
				this.priceIndex = -1;
				this.price_start = "";
				this.price_end = "";
				this.distance = "";
				this.brand_id = "";
				if (this.door_to_door == 1) {
					this.store_id = "";
				}
				this.show = false;
				this.list = [];
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.postCarList();
			},
			// 选择价格
			selectPriceItem(index) {
				this.priceIndex = index;
				this.price_start = this.priceList[index].price1;
				this.price_end = this.priceList[index].price2;
			},
			// 选择距离
			selectDistance(id) {
				this.distance = id;
			},
			// 选择品牌
			selectBrand(id) {
				this.brand_id = id;
			},
			// 选择门店
			selectStore(id) {
				this.store_id = id;
			},
			// 确定筛选
			confirmScreen() {
				this.show = false;
				this.list = [];
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.postCarList();
			},
			resultScreen() {
				this.priceIndex = -1;
				this.price_start = "";
				this.price_end = "";
				this.distance = "";
				this.brand_id = "";
				if (this.door_to_door == 1) {
					this.store_id = "";
				}
				this.show = false;
				this.list = [];
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.postCarList();
			},
			changeGroup(type) {
				if (type == 1) {
					this.group_type = type;
					this.couponList = this.cardList;
				} else if (type == 0) {
					if (this.category_id == 99999) return;
					this.group_type = type;
					this.couponList = this.groupList;
				}
			},
			selectGroup(name, id, coupon_type) {
				this.coupon_name = name;
				this.coupon_id = id;
				this.coupon_type = coupon_type;
			},
			resultGroup() {
				this.coupon_id = "";
				this.coupon_name = "";
				this.coupon_type = "";
				this.show = false;
				
				this.list = [];
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.postCarList();
			},
			confirmGroup() {
				if (this.coupon_type == 15) {
					this.category_id = 99999;
				}
				this.show = false;
				this.list = [];
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.postCarList();
			},
			// 查看车辆报价列表
			seeQuotation(item) {
				this.car_id = item.id;
				if (this.door_to_door == 1) {

					if (item.rental_status == 1) {
						this.adjustLease(item.earliest_end_time, item.id);
					} else {
						uni.showLoading({
							title: '加载中'
						})
						this.selectOfferInfo = item;
						this.$api.post(global.apiUrls.getOffer, {
							car_id: item.id,
							store_id: this.store_id,
							lng: this.cityInfo.lng,
							lat: this.cityInfo.lat,
							// lng: this.door_to_door == 0 ? this.storeInfo.lng : this.cityInfo.lng,
							// lat: this.door_to_door == 0 ? this.storeInfo.lat : this.cityInfo.lat,
							city_id: this.door_to_door == 0 ? this.storeInfo.citycode : this.cityInfo.citycode,
							// city_id: 268,
							start_time: this.timeData.toDay,
							end_time: this.timeData.twoDay
						}).then(res => {
							uni.hideLoading();
							// console.log(res);
							if (res.data.code == 1) {
								this.offerList = res.data.data;
								this.popupShow = true;
							} else {
								this.$message.info(res.data.info);
							}
						}).catch(err => {
							uni.hideLoading();
						})
					}
				} else {
					if (global.token) {
						if (item.is_other_car == 0) {
							if (item.rental_status == 1) {
								this.adjustLease(item.earliest_end_time, item.id);
							} else {
								uni.navigateTo({
									url: '/pages/index/reserveOrder/reserveOrder?store_id=' + this.store_id +
										'&car_id=' + item.id + '&door_to_door=' + this.door_to_door + '&is_sequence=' + this.is_sequence + '&coupon_id=' + this.coupon_id
								})
							}

						} else {
							this.selectOfferInfo = item;
							this.adjustStore(item.id, item.other_car_info, item);
							return;

							uni.showLoading({
								title: '加载中'
							})
							this.selectOfferInfo = item;
							this.$api.post(global.apiUrls.getOffer, {
								car_id: item.id,
								store_id: this.store_id,
								lng: this.cityInfo.lng,
								lat: this.cityInfo.lat,
								// lng: this.door_to_door == 0 ? this.storeInfo.lng : this.cityInfo.lng,
								// lat: this.door_to_door == 0 ? this.storeInfo.lat : this.cityInfo.lat,
								city_id: this.door_to_door == 0 ? this.storeInfo.citycode : this.cityInfo.citycode,
								// city_id: 268,
								start_time: this.timeData.toDay,
								end_time: this.timeData.twoDay
							}).then(res => {
								uni.hideLoading();
								// console.log(res);
								if (res.data.code == 1) {
									this.offerList = res.data.data;
									this.popupShow = true;
								} else {
									this.$message.info(res.data.info);
								}
							}).catch(err => {
								uni.hideLoading();
							})
						}
					} else {
						uni.navigateTo({
							url: '/pages/tabBar/login/login'
						})
					}
				}
			},
			goReserve(id) {
				if (global.token) {
					this.popupShow = false;
					uni.navigateTo({
						url: '/pages/index/reserveOrder/reserveOrder?store_id=' + id + '&car_id=' + this
							.selectOfferInfo.id + '&door_to_door=' + this.door_to_door + '&is_sequence=' + this.is_sequence + '&coupon_id=' + this.coupon_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/tabBar/login/login'
					})
				}
			},
			goCars(item) {
				if (global.token) {
					this.storeShow = false;
					uni.navigateTo({
						url: '/pages/index/reserveOrder/reserveOrder?store_id=' + item.store_id + '&car_id=' + this
							.selectOfferInfo.id + '&door_to_door=' + this.door_to_door + '&storeInfo=' + JSON
							.stringify(item) + '&is_sequence=' + this.is_sequence + '&coupon_id=' + this.coupon_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/tabBar/login/login'
					})
				}
			},
			// 打开地图
			openLocation(lat, lng, store_name) {
				uni.openLocation({
					latitude: lat,
					longitude: lng,
					name: store_name,
					address: store_name,
					success: function() {
						console.log('success');
					},
					fail: function() {

					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.loading_view {
		text-align: center;
		position: absolute;
		z-index: 100;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		view {
			color: #999999;
			font-size: 22rpx;
			margin-top: 16rpx;
		}
	}

	.mask_view {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.7);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
		border-radius: 16rpx;

		.mask_view_text {
			width: 110rpx;
			height: 42rpx;
			font-size: 24rpx;
			background: rgba(0, 0, 0, 0.7);
			border-radius: 28rpx;
			color: #fff;
			opacity: 0.8;
		}
	}

	.expecte_1 {
		border: 1px solid #FC5B03;
		padding: 3rpx 8rpx;
		color: #FC5B03;
		font-size: 20rpx;
		border-radius: 5rpx 0rpx 0rpx 5rpx;
		// margin-left: 32rpx;
	}

	.expecte_2 {
		border: 1px solid #FC5B03;
		padding: 3rpx 10rpx;
		background: #FC5B03;
		color: #fff;
		font-size: 20rpx;
		border-radius: 0rpx 5rpx 5rpx 0rpx;
	}

	.quotation_address2 {
		image {
			width: 32rpx;
			height: 32rpx;
		}

		.address_text {
			font-weight: 400;
			font-size: 24rpx;
			color: #1A66FA;
			margin-left: 16rpx;
		}
	}

	.confirm_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 112rpx;
		height: 48rpx;
		background: #FC5B03;
		border-radius: 88rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-left: auto;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 540rpx;
		height: 330rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 16rpx;
	}

	.coupon_num_title {
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		padding: 32rpx 0;
	}

	.coupon_num_text {
		font-size: 28rpx;
		background: #eee;
		margin: 24rpx 32rpx 0;
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 24rpx;
		border-radius: 16rpx;
	}

	.coupon_num_btn {
		padding: 0 32rpx;
		margin-top: 48rpx;

		.coupon_num_btn_1 {
			font-size: 26rpx;
			width: 180rpx;
			height: 58rpx;
			background: #eee;
			border-radius: 15rpx;
		}

		.coupon_num_btn_2 {
			font-size: 26rpx;
			width: 180rpx;
			height: 58rpx;
			background: #FC5B03;
			color: #fff;
			border-radius: 15rpx;
		}
	}

	.store_le {
		text-align: center;
		width: calc(100% - 56rpx);

		.store_le_1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #111111;
		}

		.store_le_2 {
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.store_le_2_1 {
				font-weight: 500;
				font-size: 26rpx;
				color: #111111;
			}

			.store_le_2_2 {
				width: 34rpx;
				height: 6rpx;
				margin: 0 40rpx;
			}
		}

	}

	.store_ri {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.screen {
		height: 240rpx;
		background: #fff;
		padding: 24rpx 30rpx;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 34, 101, 0.05);
		position: relative;
		z-index: 2000;

		.store {
			width: 690rpx;
			height: 132rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			display: flex;
			align-items: center;


		}

		.screen_types {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 8rpx;

			.types_item {
				display: flex;
				align-items: center;

				.types_item_text {
					font-weight: 500;
					font-size: 26rpx;
					color: #111111;
				}

				.active_types {
					font-weight: 500;
					font-size: 26rpx;
					color: #FC5B03;
				}

				image {
					width: 16rpx;
					height: 16rpx;
					margin-left: 8rpx;
				}
				.omit_text {
					max-width: 160rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1; /* 限制显示的行数为3 */
					overflow: hidden;
				}
			}
			.filter_num {
				width: 28rpx;
				height: 28rpx;
				background: #FC5B03;
				border-radius: 50%;
				font-size: 20rpx;
				color: #fff;
				margin-left: 8rpx;
			}
		}

		.recommend_sort {
			width: 100%;
			background: #fff;
			border-radius: 0 0 32rpx 32rpx;
			padding: 8rpx 32rpx;
			position: absolute;
			left: 0;

			.select_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 0;

				.select_item_text {
					font-weight: 400;
					font-size: 26rpx;
					color: #111111;
				}
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
		.group_content {
			width: 100%;
			background: #fff;
			border-radius: 0 0 32rpx 32rpx;
			position: absolute;
			left: 0;
			min-height: 658rpx;
			.group_tabs {
				width: 100%;
				height: 102rpx;
				background: #f5f5f5;
				.tabs_item {
					color: #666666;
					font-size: 30rpx;
					width: 100%;
					height: 100%;
					width: 50%;
					position: relative;
					.group_1_img {
						width: 24rpx;
						height: 24rpx;
						position: absolute;
						bottom: 0;
						right: -24rpx;
						z-index: 10;
					}
					.group_2_img {
						width: 24rpx;
						height: 24rpx;
						position: absolute;
						bottom: 0;
						left: -24rpx;
						z-index: 10;
						transform: scaleX(-1);
					}
				}
				.active_tabs_item_1 {
					font-weight: 500;
					font-size: 30rpx;
					color: #301100;
					position: relative;
					background: #fff !important;
					border-radius: 0 24rpx 0 0;
				}
				.active_tabs_item_1::after {
					content: "";
					width: 70rpx;
					height: 8rpx;
					background: #FC5B03;
					border-radius: 5rpx;
					position: absolute;
					bottom: 17rpx;
					left: 50%;
					transform: translateX(-50%);
				}
				.active_tabs_item_2 {
					font-weight: 500;
					font-size: 30rpx;
					color: #301100;
					position: relative;
					background: #fff !important;
					border-radius: 24rpx 0 0 0;
				}
				.active_tabs_item_2::after {
					content: "";
					width: 70rpx;
					height: 8rpx;
					background: #FC5B03;
					border-radius: 5rpx;
					position: absolute;
					bottom: 17rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			.group_list {
				height: 398rpx;
				background: #fff;
				overflow: hidden;
				padding: 24rpx 24rpx 0 0;
				border-radius: 0 0 32rpx 32rpx;
				.group_item {
					float: left;
					font-size: 28rpx;
					color: #2F1B0D;
					padding: 20rpx 32rpx;
					background: #F5F5F5;
					border-radius: 8rpx;
					margin-left: 24rpx;
					margin-bottom: 24rpx;
					position: relative;
				}
				.active_group_item {
					background: rgba(252,91,3,0.05);
					color: #FC5B03;
				}
				image {
					width: 27rpx;
					height: 25rpx;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 2;
				}
			}
		}

		.more_filter {
			width: 100%;
			background: #fff;
			border-radius: 0 0 32rpx 32rpx;
			padding: 0 24rpx;
			position: absolute;
			left: 0;

			.filter_scoll {
				width: 100%;
				height: 600rpx;
			}

			.filter_title {
				padding: 20rpx 0;
				font-weight: bold;
				font-size: 30rpx;
				color: #111111;
			}

			.filter_list {
				overflow: hidden;

				.filter_item {
					width: 220rpx;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					float: left;
					margin: 0 20rpx 20rpx 0;
					background: #F7F7F7;
					border-radius: 12rpx;
					font-size: 26rpx;
					color: #111111;
					padding: 0 8rpx;
					position: relative;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					/* 这里是超出几行省略 */
				}

				.filter_item:nth-child(3n+3) {
					margin: 0 0 20rpx 0;
				}

				.active_filter_item {
					font-weight: 500;
					font-size: 26rpx;
					color: #FC5B03;
					background: rgba(252, 91, 3, 0.05);
				}

				.filter_icon {
					width: 32rpx;
					height: 24rpx;
					background: #FC5B03;
					border-radius: 12rpx 0px 12rpx 0px;
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 2001;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.company_list {
				overflow: hidden;

				.company_item {
					width: 340rpx;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					float: left;
					margin: 0 20rpx 20rpx 0;
					background: #F7F7F7;
					border-radius: 12rpx;
					font-size: 26rpx;
					color: #111111;
					padding: 0 8rpx;
					position: relative;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					/* 这里是超出几行省略 */
				}

				.company_item:nth-child(2n+2) {
					margin: 0 0 20rpx 0;
				}

				.active_company_item {
					font-weight: 500;
					font-size: 26rpx;
					color: #FC5B03;
					background: rgba(252, 91, 3, 0.05);
				}

				.company_icon {
					width: 32rpx;
					height: 24rpx;
					background: #FC5B03;
					border-radius: 12rpx 0px 12rpx 0px;
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 2001;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
		.filter_operation {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 34rpx 0 54rpx;
		
			.operation_1 {
				width: 304rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 80rpx;
				border: 2rpx solid #E7E7E7;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 26rpx;
				color: #666666;
			}
		
			.operation_2 {
				width: 304rpx;
				height: 72rpx;
				background: #FC5B03;
				border-radius: 80rpx;
				border: 2rpx solid #FC5B03;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 26rpx;
				color: #fff;
			}
		}
	}

	/deep/.u-lazy-item {
		width: 160rpx !important;
		height: 120rpx !important;
	}

	.car_list {
		display: flex;
		margin-top: 2rpx;

		.list_le {
			width: 170rpx;
			// height: 100%;

			.type_item {
				padding: 26rpx 10rpx 24rpx;
				text-align: center;
				position: relative;

				.type_item_1 {
					font-weight: 500;
					font-size: 26rpx;
					color: #111111;
				}

				.type_item_2 {
					margin-top: 4rpx;
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
				}
			}

			.type_item_s {
				background: #fff;
				padding: 26rpx 10rpx 24rpx;
				text-align: center;
				position: relative;	
			}
			.type_item_1_s {
				font-weight: 500;
				font-size: 26rpx;
				color: #FC5B03;
			}
			
			.type_item_2_s {
				margin-top: 4rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #FC5B03;
			}
			
			.type_item_3_s {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				bottom: -24rpx;
				right: 0;
				z-index: 10;
			}	
			.card_icon {
				width: 135rpx;
				height: 30rpx;
				transform: translateY(6rpx);
				margin: 15rpx 0;
			}
		}

		.list_ri {
			width: calc(100% - 170rpx);
			// height: 100%;
			padding: 0 16rpx 24rpx;
			background: #fff;
			position: relative;

			.ri_item {
				margin-top: 24rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 20rpx 0px rgba(0, 63, 136, 0.05);
				border-radius: 16rpx;
				border: 2rpx solid #ECEEF4;
				padding: 24rpx 24rpx 32rpx 20rpx;
				.card_img {
					position: absolute;
					top: -25rpx;
					right: -28rpx;
					width: 115rpx;
					height: 26rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.vehicle_information {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.car_name {
						width: calc(100% - 180rpx);

						.car_name_1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #111111;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.car_name_2 {
							margin-top: 12px;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #666666;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;

							.car_name_2_1 {
								color: #CCCCCC;
							}
						}
					}

					.car_img {
						width: 160rpx;
						height: 120rpx;
						position: relative;
						transform: translateY(6rpx);
						.car_icon {
							width: 80rpx;
							height: 18rpx;
							position: absolute;
							top: 8rpx;
							left: 8rpx;
						}

						.group_text {
							position: absolute;
							top: 0rpx;
							left: 0rpx;
							background: #FB8A08;
							border-radius: 16rpx 0 16rpx 0;
							color: #fff;
							font-size: 18rpx;
							padding: 0 10rpx;
						}
					}

				}

				.vehicle_label {
					display: flex;
					align-items: center;
					margin-top: 12rpx;

					.label_le {
						flex: 1;
						display: flex;
						align-items: center;

						.label_1 {
							width: 108rpx;
							height: 30rpx;
						}

						.label_2 {
							padding: 2rpx 6rpx;
							background: rgba(26, 102, 250, 0.05);
							border-radius: 4rpx;
							font-weight: 500;
							font-size: 22rpx;
							color: #506898;
							margin-left: 12rpx;
						}

						.label_3 {
							padding: 2rpx 8rpx;
							background: #1677FF;
							color: #fff;
							font-size: 22rpx;
							border-radius: 5rpx;

							image {
								width: 22rpx;
								height: 22rpx;
								margin-right: 10rpx;
							}
						}
					}

					.label_ri {
						font-size: 22rpx;
						color: #999999;
					}

				}

				.car_btm {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;

					.btm_1 {
						.car_total_price {
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
						}

						.car_price {
							margin-top: 10rpx;
						}
						.car_price_1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
							display: inline-block;
							transform: translateY(3rpx);
						}
						
						.car_price_2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #EF2E28;
							line-height: 34rpx;
							display: inline-block;
							transform: translateY(3rpx);
						}
						
						.car_price_3 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #EF2E28;
							line-height: 32rpx;
						}
						
						.car_price_4 {
							padding: 2rpx 6rpx;
							background: rgba(252, 91, 3, 0.07);
							border-radius: 4rpx;
							font-weight: 500;
							font-size: 22rpx;
							color: #FC5B03;
							margin-left: 12rpx;
						}
						.car_price_card {
							margin-left: 12rpx;
							.car_price_card_1 {
								font-size: 22rpx;
								color: #EF2E28;
								border: 1px solid #EF2E28;
								border-radius: 4rpx 0 0 4rpx;
								padding: 0 5rpx;
							}
							.car_price_card_2 {
								height: 100%;
								padding: 0 5rpx;
								font-size: 22rpx;
								background: #EF2E28;
								color: #fff;
								border: 1px solid #EF2E28;
								border-radius: 0 4rpx 4rpx 0;
							}
						}
					}

					.btm_2 {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 112rpx;
						height: 56rpx;
						background: #FC5B03;
						border-radius: 88rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #FFFFFF;
					}

					.btm_3 {
						display: flex;
						align-items: center;

						.btm_3_1 {
							font-weight: 500;
							font-size: 22rpx;
							color: #111111;
						}

						.btm_3_2 {
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
						}

						.btm_3_3 {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}
			}
		}

		.recommend_cars {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 64rpx 0 40rpx;

			.recommend_text {
				font-size: 25rpx;
				color: #506898;
				margin: 0 18rpx;
			}

			.recommend_line {
				height: 1rpx;
				background: #506898;
				flex: 1;
				opacity: 0.4;
			}
		}

		.suggest_info {
			height: 140rpx;
			background: rgba(26, 102, 250, 0.05);
			border-radius: 16rpx;
			padding: 24rpx;
			display: flex;

			.suggest_icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 72rpx;
				height: 32rpx;
				background: #1A66FA;
				border-radius: 8rpx;
				font-size: 22rpx;
				color: #fff;
				transform: skew(-10deg);
				margin-right: 8rpx;
			}

			.suggest_text {
				font-size: 25rpx;
				color: #506898;
			}
		}

		.recommend_list {
			margin-top: -84rpx;
		}
	}

	/deep/.u-drawer-bottom {
		background: #F6F7FB !important;
	}

	.popup {
		background: #F6F7FB;

		.popup_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 32rpx 30rpx;

			.popup_title_text {
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}
		}

		.select_vehicle {
			background: #fff;
			padding: 20rpx 40rpx;
			box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 32rpx 32rpx 0px 0px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.car_name {
				width: calc(100% - 180rpx);

				.car_name_1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.car_name_2 {
					margin-top: 12px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

					.car_name_2_1 {
						color: #CCCCCC;
					}
				}
			}

			.car_img {
				width: 160rpx;
				height: 120rpx;
				position: relative;
				transform: translateY(6rpx);

				.car_icon {
					width: 80rpx;
					height: 18rpx;
					position: absolute;
					top: 8rpx;
					left: 8rpx;
				}
			}
		}

		.quotation_list {
			padding: 20rpx 24rpx 24rpx;

			.quotation_scroll {
				height: 550rpx;
			}

			.quotation_item {
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 20rpx;

				.quotation_information {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.information {
						.information_1 {
							display: flex;
							align-items: center;

							image {
								width: 30rpx;
								height: 28rpx;
							}

							.information_1_1 {
								font-weight: bold;
								font-size: 30rpx;
								color: #111111;
								margin: 0 16rpx 0 8rpx;
							}

							.information_1_2 {
								font-weight: bold;
								font-size: 26rpx;
								color: #FC5B03;
							}
						}

						.information_2 {
							display: flex;
							align-items: center;
							margin-top: 16rpx;

							image {
								width: 18rpx;
								height: 12rpx;
							}

							.information_2_1 {
								font-size: 22rpx;
								color: #999999;
								margin: 0 16rpx 0 4rpx;
							}

							.information_2_2 {
								font-size: 22rpx;
								color: #111111;
							}
						}
					}

					.quotation_address {
						text-align: center;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-bottom: 8rpx;
						}

						.address_text {
							font-weight: 400;
							font-size: 20rpx;
							color: #1A66FA;
						}
					}

				}

				.quotation_label {
					display: flex;
					align-items: center;
					margin-top: 16rpx;

					.label_le {
						flex: 1;
						display: flex;
						align-items: center;

						.label_1 {
							width: 108rpx;
							height: 30rpx;
						}

						.label_2 {
							padding: 2rpx 6rpx;
							background: rgba(26, 102, 250, 0.05);
							border-radius: 4rpx;
							font-weight: 500;
							font-size: 22rpx;
							color: #506898;
							margin-left: 12rpx;
						}

						.label_3 {
							padding: 2rpx 8rpx;
							background: #1677FF;
							color: #fff;
							font-size: 22rpx;
							border-radius: 5rpx;

							image {
								width: 22rpx;
								height: 22rpx;
								margin-right: 10rpx;
							}
						}
					}

					.label_ri {
						font-size: 22rpx;
						color: #999999;
					}

				}

				.quotation_btm {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 24rpx;

					.quotation_total_price {
						font-weight: 500;
						font-size: 22rpx;
						color: #999999;
					}

					.quotation_price {
						display: flex;
						margin-left: 20rpx;

						.quotation_price_1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #EF2E28;
						}

						.quotation_price_2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #EF2E28;
							line-height: 34rpx;
						}

						.quotation_price_3 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #EF2E28;
							line-height: 32rpx;
						}

					}

					.btm_2 {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 112rpx;
						height: 56rpx;
						background: #FC5B03;
						border-radius: 88rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #FFFFFF;
						margin-left: 24rpx;
					}

					.btm_3 {
						display: flex;
						align-items: center;
						margin-top: 42rpx;

						.btm_3_1 {
							font-weight: 500;
							font-size: 22rpx;
							color: #111111;
						}

						.btm_3_2 {
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
						}

						.btm_3_3 {
							width: 24rpx;
							height: 24rpx;
						}
					}

					.quotation_price_4 {
						padding: 2rpx 6rpx;
						background: rgba(252, 91, 3, 0.07);
						border-radius: 4rpx;
						font-weight: 500;
						font-size: 22rpx;
						color: #FC5B03;
						margin-right: 12rpx;
					}
				}
			}
		}
	}

	.wrongQuestion_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.wrongQuestion_fd0_0_c0_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 36rpx;
		width: 135rpx;
	}

	.wrongQuestion_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111;
	}

	.wrongQuestion_fd0_0_c2 {
		width: 135rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		text-align: right;
	}

	.wrongQuestion_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 2000;
		top: 0rpx;
		background: #fff;
	}

	.page {
		// min-height: calc(100vh - var(--window-bottom));
		background-size: 100% auto !important;
		background-color: #F6F7FB;
	}
</style>